<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>4</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    </head>
    <body>


        <div id="app">
            <table border="1">
                <tr>
                    <th>序号</th>
                    <th>省份</th>
                    <th>省会</th>
                    <th>景点</th>
                </tr>
                <tr v-for="(item,index) in touristlist" v-key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.province}}</td>
                    <td>{{item.city}}</td>
                    <td>{{item.spot}}</td>
                </tr>
            </table>
        </div>

        <script>
        var exam= new Vue({
        el: "#app",
        data: {
        touristlist : [{ //定义旅游信息列表
        province : '黑龙江省',
        city : '哈尔滨市',
        spot : '太阳岛 圣索菲亚教堂 伏尔加庄园'
        },
        {
        province : '吉林省',
        city : '长春市',
        spot : '净月潭 长影世纪城 伪满皇宫'

        },
        {
        province : '辽宁省',
        city : '沈阳市',
        spot : '沈阳故宫 沈阳北陵 张氏帅府'
        }]

        }
        })

    </script>
    </body>
</html>